RWD 設計原則


Posted by mijouhsieh on 2023-04-06

行動裝置友善設計: mobile first - 先從最小螢幕尺寸開始考慮,小螢幕所顯示的內容和能運用的佈局有限,因此,優先考慮,隨著螢幕尺寸加大,再追加內容。

RWD有5種不同的流動模式:

  • 主體為流動 (mostly fluid)
  • 欄內容下排 (column drop)
  • 版面配置位移 (layout shifter)
  • 微小調整 (tiny tweaks)
  • 畫布外空間利用 (off canvas)

主體為流動 (mostly fluid)

「流動」即內容佈局會隨著 viewport 尺寸而流動。
這種模式有以下特性:
在小螢幕上,內容垂直堆疊;但在大螢幕上,內容會排列成多欄
當 viewport 放大到達某個 breakpoint 時,內容會停止流動,固定置中,因此不需要設定多餘的 breakpoint,又能維持網頁易讀性。


#RWD







Related Posts

DAY7:Count by X

DAY7:Count by X

寫一個簡單堪用的 ESLint plugin

寫一個簡單堪用的 ESLint plugin

Vite 安裝

Vite 安裝


Comments